<template>
	<div class="login">
		<Card class="login-card">
			<p slot="title">
				<Icon type="md-log-in"></Icon>
				欢迎使用百伦CRM系统
			</p>
			<p class="error-tip" style="color: red;" v-if="error">用户名或密码错误</p>
			<Form ref="loginForm" :model="formData" :rules="rules">
				<FormItem prop="username">
					<Input type="text" v-model="formData.username" placeholder="用户名">
					<Icon type="ios-person-outline" slot="prepend"></Icon>
					</Input>
				</FormItem>
				<FormItem prop="password">
					<Input type="password" v-model="formData.password" placeholder="密码">
					<Icon type="ios-lock-outline" slot="prepend"></Icon>
					</Input>
				</FormItem>
				<FormItem style="text-align: right">
					<Button type="primary" @click="handleSubmit" long>登录</Button>
				</FormItem>
			</Form>
		</Card>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				formData: {
					username: '',
					password: ''
				},
				rules: {
					username: [{
						required: true,
						message: '账号不能为空',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '密码不能为空',
						trigger: 'blur'
					}]
				},
				error: false
			}
		},
		methods: {
			handleSubmit(){
				this.$refs.loginForm.validate((valid) => {
					if(valid){
						this.$router.push('/home'); 
					}
				})
			}
		}
	}
</script>
<style scoped>
	.login {
		width: 100%;
		height: 100%;
		background-image: url(../images/login_bg.jpg);
	}

	.login-card {
		width: 20%;
		position: absolute;
		right: 40%;
		top: 35%;
	}

	.error-tip {
		color: red;
		font-size: 10px;
		text-align: center;
		margin-bottom: 10px;
	}
</style>
